<template>
	<view class="container">
		<!-- 用户信息区域 -->
		<view class="user-info">
			<view class="avatar">
				<text class="avatar-placeholder">用户</text>
			</view>
			<view class="user-detail">
				<text class="username">{{userInfo.username}}</text>
				<text class="user-id">ID: {{userInfo.userId}}</text>
			</view>
		</view>
		
		<!-- 功能菜单 -->
		<view class="menu-list">
			<view class="menu-group">
				<view class="menu-item" @click="handleMyApplications">
					<uni-icons class="menu-icon" type="list" size="24" color="#2979ff"></uni-icons>
					<text class="menu-text">我的申请</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="handleMyQueue">
					<uni-icons class="menu-icon" type="calendar" size="24" color="#ff9800"></uni-icons>
					<text class="menu-text">我的排队</text>
					<text class="menu-arrow">></text>
				</view>
			</view>
			
			<view class="menu-group">
				<view class="menu-item" @click="handleSettings">
					<uni-icons class="menu-icon" type="gear" size="24" color="#4cd964"></uni-icons>
					<text class="menu-text">设置</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="handleHelp">
					<uni-icons class="menu-icon" type="help" size="24" color="#9c27b0"></uni-icons>
					<text class="menu-text">帮助与反馈</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="handleAbout">
					<uni-icons class="menu-icon" type="info" size="24" color="#666666"></uni-icons>
					<text class="menu-text">关于</text>
					<text class="menu-arrow">></text>
				</view>
			</view>
		</view>
		
		<!-- 版本信息 -->
		<view class="version-info">
			<text>版本 1.0.0</text>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';

// 用户数据
const userInfo = reactive({
	username: '用户名',
	userId: 'JX123456'
});

const handleMyApplications = () => {
	// 处理我的申请
	console.log('我的申请');
};

const handleMyQueue = () => {
	// 处理我的排队
	console.log('我的排队');
};

const handleSettings = () => {
	// 处理设置
	console.log('设置');
};

const handleHelp = () => {
	// 处理帮助与反馈
	console.log('帮助与反馈');
};

const handleAbout = () => {
	// 处理关于
	console.log('关于');
};
</script>

<style lang="scss">
@import '@/styles/common.scss';

.user-info {
	display: flex;
	align-items: center;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	background-color: #e0e0e0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 30rpx;
}

.avatar-placeholder {
	font-size: 36rpx;
	color: #666;
}

.user-detail {
	display: flex;
	flex-direction: column;
}

.username {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.user-id {
	font-size: 28rpx;
	color: #999;
}

.menu-list {
	margin-bottom: 20rpx;
}

.menu-group {
	background-color: #fff;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-icon {
	margin-right: 20rpx;
	font-size: 40rpx;
}

.menu-text {
	flex: 1;
	font-size: 30rpx;
}

.menu-arrow {
	color: #ccc;
	font-size: 30rpx;
}

.version-info {
	text-align: center;
	padding: 40rpx 0;
	color: #999;
	font-size: 24rpx;
}
</style>